<template>
  <div class="session flex flex-col bg-white">
    <div
      class="flex items-center title ml-[8px] mt-[4px] mb-[8px] text-[var(--color-text-base)]"
    >
      <el-image class="w-[24px] h-[24px]" :src="iconMultiple"></el-image
      >数字助手
    </div>
    <div class="flex-1 min-h-0">
      <ElScrollbar>
        <div class="px-[16px]">
          <div v-for="item in pager.lists.splice(0, 6)" :key="item.id">
            <NuxtLink :to="`/create/produce?id=${item?.id}`" class="h-full">
              <Item @reset="resetPage" :item="item" />
            </NuxtLink>
          </div>
          <div
            @click="emits('to')"
            class="cursor-pointer flex items-center justify-center bg-[#363a46] h-[41px] rounded-[8px] text-[var(--el-color-primary)]"
          >
            更多助手等你来探索
          </div>
        </div>
      </ElScrollbar>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Item from "./item.vue";
import iconMultiple from "@/assets/images/chatting/icon-multiple.png";
import {
  getCreationCategory,
  getCreationListsByCategory,
  creationCollection,
  creationCancelCollection,
} from "@/api/create";
import { useAppStore } from "~/stores/app";
import { useSessionList } from "@/composables/useSessionList";
const {
  sessionLists,
  sessionAdd,
  sessionEdit,
  sessionDelete,
  sessionClear,
  sessionActive,
} = useSessionList();

const { lockFn: sessionAddLock, isLock } = useLockFn(async () => {
  await sessionAdd();
});

const emits = defineEmits(["to"]);
const { pager, getLists, resetPage } = usePaging({
  size: 6,
  fetchFun: getCreationListsByCategory,
});
onMounted(() => {
  getLists();
  if(appStore.getChatConfig.is_reopen){
    sessionAddLock();
    appStore.getChatConfig.is_reopen = 0;
  }
});
const appStore = useAppStore();

</script>
<style lang="scss" scoped>
.session {
  width: 460px;
  height: 100%;
  background-color: var(--el-bg-color-base);
  border-radius: 8px;
}
</style>
